<template>
	<view class="content">
		<view style="swiperView">
			<swiper style="width: 100vw;height: 100vh;" :circular="true" :indicator-dots="false" :autoplay="true" :interval="6000" :duration="1000">
				<swiper-item>
					<view style="background-color: #007AFF;width: 100%;height: 100%;" class="swiper-item"></view>
				</swiper-item>
				<swiper-item>
					<view style="background-color: #4CD964;width: 100%;height: 100%;" class="swiper-item"></view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="contentView" :class="hideShow ? 'show' : 'hide'">
			
			<view class="widthAll contact marginAuto">
				<view class="lineWidth marginAuto bottomLine line flex alignCenter spaceBetween">
					<view class="lineLeft flex alignCenter ">
						姓名
					</view>
					<view class="lineRight flex alignCenter">
						<input v-model="username" type="text" placeholder="请输入姓名" placeholder-style="font-size: 28rpx;color: #999999;">
					</view>
				</view>
				<view class="lineWidth marginAuto bottomLine line flex alignCenter spaceBetween">
					<view class="lineLeft flex alignCenter ">
						手机号
					</view>
					<view class="lineRight flex alignCenter">
						<input type="text" v-model="mobile" maxlength="11" placeholder="请输入手机号" placeholder-style="font-size: 28rpx;color: #999999;">
					</view>
				</view>
				<view class="lineWidth marginAuto line flex alignCenter spaceBetween">
					<view class="lineLeft flex alignCenter ">
						验证码
					</view>
					<view class="lineRight flex alignCenter">
						<input v-model="code" maxlength="6" type="text" placeholder="请输入验证码" placeholder-style="font-size: 28rpx;color: #999999;">
						<view style="font-size: 28rpx;color: #2978FF;" @click="getSms">{{codeWords}}</view>
					</view>
				</view>
			</view>
			
			<view class="widthAll contact marginAuto">
				<view class="lineWidth marginAuto bottomLine line flex alignCenter spaceBetween">
					<view class="lineLeft flex alignCenter ">
						业务
					</view>
					<view class="lineRight flex alignCenter">
						<picker mode="selector" :range="ywlist" @change="ywChange">
							<view>{{seleYw}}</view>
						</picker>
					</view>
				</view>
				<view class="lineWidth marginAuto bottomLine line flex alignCenter spaceBetween">
					<view class="lineLeft flex alignCenter ">
						房源地区
					</view>
					<view class="lineRight flex alignCenter">
						<input type="text" placeholder="请输入验证码" placeholder-style="font-size: 28rpx;color: #999999;">
					</view>
				</view>
				<view class="lineWidth marginAuto bottomLine line flex alignCenter spaceBetween">
					<view class="lineLeft flex alignCenter ">
						企业名称
					</view>
					<view class="lineRight flex alignCenter">
						<input type="text" placeholder="填写企业名称" placeholder-style="font-size: 28rpx;color: #999999;">
					</view>
				</view>
			</view>
			
			<view class="widthAll contact marginAuto">
				<view class="lineWidth marginAuto line flex alignCenter spaceBetween" style="height: auto;align-items: flex-start;">
					<view class="lineLeft flex alignCenter " style="margin-top: 30rpx;">
						客户备注：
					</view>
					<view class="lineRight flex" style="margin-top: 30rpx;">
						<textarea v-model="userDesc" value="" placeholder="请输入备注" style="width: 460rpx;" />
					</view>
				</view>
			</view>
			
			<view class="widthAll contact marginAuto xyzc flex alignCenter" @click="isCheckXy =! isCheckXy">
				<view class="checkView flex alignCenter spaceAround">
					<text v-if="isCheckXy">
						☑️
					</text>
				</view> 我已阅读并同意XXX 用户协议 和 隐私政策
			</view>
			
			<view class="widthAll contact marginAuto appointment flex alignCenter spaceAround">
				立即预约
			</view>
			
		</view>
		
		<uni-popup type="center" ref="mainpop">
			<view style="width: 200rpx;height: 200rpx;background-color: #F0AD4E;"></view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hideShow: false,
				ywlist: ['请选择', '物业管理', '智慧社区', '社区商业'],
				seleYw: '请选择',
				cxlist: ['请选择', '007', 'Z03'],
				seleCx: '请选择',
				codeWords: '获取验证码',
				timer: null,
				time: 60,
				
				mobile: '',			// 手机号
				username: '',		// 姓名
				code: '',			// 验证码
				userDesc: '',		// 客户备注
				isCheckXy: false,	// 是否同意隐私政策和用户协议
			}
		},
		onLoad() {
		},
		onReady() {
			setTimeout(() => {
				this.hideShow = true
			}, 1000)
		},
		methods: {
			ywChange(e){
				this.seleYw = this.ywlist[e.target.value]
			},
			cxChange(e){
				this.seleCx = this.cxlist[e.target.value]
			},
			getSms(){
				if(!this.mobile){
					this.$tips(`请输入手机号`)
					return
				}
				if(!(/(13|14|15|16|17|18|19)[0-9]\d{8}/.test(this.mobile))){
					this.$tips(`手机号不正确`)
					return
				}
				if(this.timer){
					this.$tips(`请在${this.time}后重新获取`)
					return
				}
				this.timer = setInterval(() => {
					if(this.time < 2){
						clearInterval(this.timer)
						this.timer = null
						this.codeWords = '获取验证码'
						return
					}
					this.time--
					this.codeWords = `${this.time} s`
				}, 1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.appointment{
		height: 80rpx;
		color: #FFFFFF;
		background: linear-gradient(to right, #619BFE, #2676FF)!important;
	}
	.checkView{
		width: 28rpx;
		height: 28rpx;
		border-radius: 50rpx;
		border: 1rpx solid #999999;
		margin-left: 30rpx;
		margin-right: 14rpx;
	}
	.xyzc{
		font-size: 24rpx;
		color: #333333;
		height: 80rpx;
	}
	input{flex: 1;}
	.lineLeft{
		width: 170rpx;
		font-size: 28rpx;
		color: #333333;
	}
	.lineRight{
		flex: 1;
		height: 100%;
	}
	.contact{
		
		// height: 324rpx;
		border-radius: 10rpx;
		background: #FFFFFF;
		margin-top: 20rpx!important;
	}
	.line{
		height: 106rpx;
	}
	// .marginAuto{margin: auto;}
	.widthAll{width: 690rpx;}
	.swiperView{
		width: 100vw;
		height: 100vh;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1;
	}
	.contentView{
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 100vh;
		left: 0;
		transition: all 2s;
		background: rgba($color: #000000, $alpha: .5);
		z-index: 2;
		overflow: hidden;
	}
	.show{top: 0;}
	.hide{top: 100vh;}
</style>
